Lesson 9: Adding Media

Contents

• The best ways to add images, audio clips, videos, and inline frames to a page
• Different ways to position images in different situations
• How to provide audio and video fallbacks for older browsers
• Common attributes available to audio clips and videos
• The seamless attribute, which allows us to make inline frames behave as if they are part of the page they are referenced from
• The semantic way to mark up self-contained content, including media

Today, we can freely use images, audio, video, and inline frames knowing that this content is supported across all major browsers.

Adding Images

To add images to a page, we use the <img> inline element. The <img> element is a self-containing, or empty, element, which means that it doesn’t wrap any other content and it exists as a single tag. For the <img> element to work, a src attribute and value must be included to specify the source of the image. The src attribute value is a URL, typically relative to the server where a website is hosted.

In conjunction with the src attribute, the alt (alternative text) attribute, which describes the contents of an image, should be applied. The alt attribute value is picked up by search engines and assistive technologies to help convey the purpose of an image. The alt text will be displayed in place of the image if for some reason the image is not available.

1

<img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief">

Supported Image Formats

Images come in a variety of different file formats, and each browser may support (or not support) different formats. By and large, the most commonly supported formats online are gif, jpg, and png images. Of these, the most widely used formats today are jpg and png. The jpg format provides quality images with high color counts while maintaining a decent file size, ideal for faster load times. The png format is great for images with transparencies or low color counts. We most commonly see jpg images used for photographs and png images used for icons or background patterns.

Sizing Images

One option is to use the width and height attributes directly within the <img> tag in HTML. Additionally, images may be sized using the width and height properties in CSS. When both the HTML attributes and CSS properties are used, the CSS attributes will take precedence over the HTML attributes.

Specifying either a width or height will cause the other dimension to adjust automatically to maintain the aspect ratio of the image. As an example, if we want an image to be 200 pixels tall but are less specifically concerned about how wide it is, we can set the height to 200 pixels, and the width of the image will adjust accordingly. Setting both a width and height will work also; however, doing so may break the aspect ratio of an image, causing it to appear distorted.

While using the width and height attributes directly in HTML provides some semantic value by noting an image’s original size, it can be difficult to manage numerous images that all need to be the same size. In this event, it’s common practice to use CSS to resize the images.

Positioning Images

Inline Positioning Images

The <img> element is by default an inline-level element. Adding an image without any styles to a page will position that image within the same line as the content that surrounds it. Additionally, the height of the line in which an image appears will be changed to match the height of the image, which can create large vertical gaps within that line.

Block Positioning Images

Adding the display property to an image and setting its value to block forces the image to be a block-level element. This makes the image appear on its own line, allowing the surrounding content to be positioned above and below the image.

Positioning Images Flush Left or Right

Sometimes displaying an image as inline or block, or perhaps even inline-block, isn’t ideal. We may want the image to appear on the left or right side of its containing element, while all of the other content wraps around the image as necessary. To do this, we use the float property with a value of either left or right.

1
2
3
4
5
6
7

img {
  background: #eaeaed;
  border: 1px solid #9799a7;
  float: right;
  margin: 8px 0 0 20px;
  padding: 4px;
}

When to Use an Image Element vs. a Background Image

There are two primary ways to add images to a web page. One way, as covered here, is to use the <img> element within HTML. Another way is to use the background or background-image property within CSS to assign a background image to an element. Either option will do the job; however, they each have specific use cases.

The <img> element within HTML is the preferred option when the image being used holds semantic value and its content is relevant to the content of the page.

The background or background-image property within CSS is the preferred option when the image being used is part of the design or user interface of the page. As such, it’s not directly relevant to the content of the page.

Adding Audio

HTML5 provides a quick and easy way to add audio files to a website by way of the <audio> element. As with the <img> element, the <audio> element accepts a source URL specified by the src attribute. Unlike the <img> element, though, the <audio> element requires both opening and closing tags.

1

<audio src="jazz.ogg"></audio>

Audio Attributes

Several other attributes may accompany the src attribute on the <audio> element; the most popular include autoplay, controls, loop, and preload.

The autoplay, controls, and loop attributes are all Boolean attributes. As Boolean attributes, they don’t require a stated value. Instead, when each is present on the <audio> element its value will be set to true, and the <audio> element will behave accordingly.

If the autoplay Boolean attribute is present on the <audio> element, nothing will appear on the page, but the audio file will automatically play upon loading.

To display the <audio> element on a page, the controls Boolean attribute is necessary. When it’s applied to the <audio> element, the controls Boolean attribute will display a browser’s default audio controls, including play and pause, seek, and volume controls.

When present on the <audio> element, the loop Boolean attribute will cause an audio file to repeat continually, from beginning to end.

Lastly, the preload attribute for the <audio> element helps identify what, if any, information about the audio file should be loaded before the clip is played. It accepts three values: none, auto, and metadata. The none value won’t preload any information about an audio file, while the auto value will preload all information about an audio file. The metadata value sits in between the none and auto values, as it will preload any available metadata information about an audio file, such as the clip’s length, but not all information.

When the preload attribute isn’t present on the <audio> element, all information about an audio file is loaded, as if the value was set to auto. For this reason, using the preload attribute with a value of metadata or none is a good idea when an audio file is not essential to a page. It’ll help to conserve bandwidth and allow pages to load faster.

Audio Fallbacks & Multiple Sources

At the moment, different browsers support different audio file formats, the three most popular of which are ogg, mp3, and wav. For the best browser support we’ll need to use a handful of audio fallbacks, which will be included inside an <audio> element’s opening and closing tags.

1
2
3
4
5
6

<audio controls>
  <source src="jazz.ogg" type="audio/ogg">
  <source src="jazz.mp3" type="audio/mpeg">
  <source src="jazz.wav" type="audio/wav">
  Please <a href="jazz.mp3" download>download</a> the audio file.
</audio>

Adding Video

Adding video in HTML5 is very similar to adding audio. We use the <video> element in place of the <audio> element. All of the same attributes (src, autoplay, controls, loop, and preload) and fallbacks apply here, too.

With the <audio> element, if the controls Boolean attribute isn’t specified the audio clip isn’t displayed. With videos, if the controls Boolean attribute is not specified the video will display. However, it is fairly difficult to view unless the autoplay Boolean attribute is also applied. In general, the best practice here is to include the controls Boolean attribute unless there is a good reason not to allow users to start, stop, or replay the video.

Poster Attribute

One additional attribute available for the <video> element is the poster attribute. The poster attribute allows us to specify an image, in the form of a URL, to be shown before a video is played.

1

<video src="earth.ogv" controls poster="earth-video-screenshot.jpg"></video>

Video Fallbacks

As with the <audio> element, video fallbacks are also necessary. The same markup format, with multiple <source> elements for each file type and a plain text fallback, also applies within the <video> element.

1
2
3
4
5

<video controls>
  <source src="earth.ogv" type="video/ogg">
  <source src="earth.mp4" type="video/mp4">
  Please <a href="earth.mp4" download>download</a> the video.
</video>

Adding Inline Frames

Another way to add content to a page is to embed another HTML page within the current page. This is done using an inline frame, or <iframe> element. The <iframe> element accepts the URL of another HTML page within the src attribute value; this causes the content from the embedded HTML page to be displayed on the current page.

The <iframe> element has a few default styles, including an inset border and a width and height. These styles can be adjusted using the frameborder, width, and height HTML attributes or by using the border, width, and height CSS properties.

Seamless Inline Frames

Pages referenced within the src attribute of an <iframe> element play by their own rules, as they do not inherit any styles or behaviors from the page they are referenced on.

There will be times when we’ll want to change these behaviors, and the seamless Boolean attribute will allow us to do just that. When present on the <iframe> element, the seamless Boolean attribute allows styles from the page that includes an <iframe> element to be inherited by the page referenced within the <iframe> element. Additionally, the seamless Boolean attribute allows links clicked on a page referenced within an <iframe> element to be opened within the same window as the original page that includes the <iframe> element.

Semantically Identifying Figures & Captions

With HTML5 also came the introduction of the <figure> and <figcaption> elements. These elements were created to semantically mark up self-contained content or media, commonly with a caption. Before HTML5 this was frequently done using an ordered list. While an ordered list worked, the markup was not semantically correct.

Figure

The <figure> block-level element is used to identify and wrap self-contained content, often in the form of media. It may surround images, audio clips, videos, blocks of code, diagrams, illustrations, or other self-contained media. More than one item of self-contained content, such as multiple images or videos, may be contained within the <figure> element at a time. If the <figure> element is moved from the main portion of a page to another location (for example, the bottom of the page), it should not disrupt the content or legibility of the page.

1
2
3

<figure>
  <img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief">
</figure>

Figure Caption

To add a caption or legend to the <figure> element, the <figcaption> element is used. The <figcaption> may appear at the top of, bottom of, or anywhere within the <figure> element; however, it may only appear once. When it’s used, the <figcaption> element will serve as the caption for all content within the <figure> element.

Additionally, the <figcaption> element may replace an <img> element’s alt attribute if the content of the <figcaption> element provides a useful description of the visual content of the image.

1
2
3
4

<figure>
  <img src="dog.jpg">
  <figcaption>A beautiful black, brown, and white hound dog wearing kerchief.</figcaption>
</figure>

Not all forms of media need to be included within a <figure> element or include a <figcaption> element; only those that are self-contained and belong together as a group.

Summary

Alongside text, media is one of the largest parts of the web. Use of images, audio, and video has only grown over recent years, and it isn’t likely to slow down. Now we know how to incorporate these forms of media into our designs and how we can use them to enrich the content on our websites.

Within this lesson we covered the following:

• The best ways to add images, audio clips, videos, and inline frames to a page
• Different ways to position images in different situations
• How to provide audio and video fallbacks for older browsers
• Common attributes available to audio clips and videos
• The seamless attribute, which allows us to make inline frames behave as if they are part of the page they are referenced from
• The semantic way to mark up self-contained content, including media